import './workspace.less'
import {LoginService} from "@/login/LoginService";
import React, {ReactNode} from "react";
import {PlButton, PlCol, PlDate, PlIcon, PlRow} from "plain-design";
import {ManagerBellData} from "@/application/manager/home/components/ManagerBell";
import {designProPage} from "../../designProPage";

const projects: {
    title: string,
    desc: string,
    tags: string[],
    avatar: string,
    url?: string,
}[] = [
    {
        title: 'Plain Design',
        desc: '基于 plain-design-composition + typescript 实现的一套组合式React组件库。',
        tags: ['React', 'Typescript'],
        avatar: 'https://img-blog.csdnimg.cn/20210512222130875.jpg',
        url: 'http://plain-pot.gitee.io/plain-design-doc/#composition%2Fcomposition-introduce.entire',
    },
    {
        title: 'Plain UI',
        desc: '基于 plain-ui-composition + typescript开发实现的一套组合式Vue3.0组件库，拥有接近完美的typescript组件开发体验。',
        tags: ['Vue3.0', 'Typescript'],
        avatar: 'https://img-blog.csdnimg.cn/20210512222130892.jpg',
        url: 'http://plain-pot.gitee.io/plain-ui-doc-v3/',
    },
    {
        title: 'plain-design-composition',
        desc: '基于Vue3.0响应式API + ReactHooks实现的用来开发组合式React组件的工具库，可以拥有接近完美的React + Typescript组件开发体验。',
        tags: ['React Hooks', 'Composition'],
        avatar: 'https://img-blog.csdnimg.cn/20210512222130889.jpg',
        url: 'http://plain-pot.gitee.io/plain-design-doc/#composition%2Fcomposition-introduce.entire',
    },
    {
        title: 'plain-popper',
        desc: '类似于popper.js，一个轻量级的下拉实现插件库，做了一些额外的滚动优化以及下拉弹框动画支持。',
        tags: ['Javascript', 'Popper'],
        avatar: 'https://img-blog.csdnimg.cn/20210512222130895.jpg',
    },
    {
        title: 'plain-loading',
        desc: 'loading动画组件，内置有几种常见的页面加载动画小组件，可以满足不同场景的加载提示需求。',
        tags: ['javascript', 'loading'],
        avatar: 'https://img-blog.csdnimg.cn/20210512222130887.jpg',
        url: 'http://plain-pot.gitee.io/plain-ui-doc-v3/#components%2Floading',
    },
    {
        title: 'plain-micro-application',
        desc: '基于 import-html-entry + 堆栈式路由实现的微前端路由库。子应用可以通过加载主应用部署的代码启动调试，而不需要依赖额外的代码。',
        tags: ['Micro Front', 'Route'],
        avatar: 'https://img-blog.csdnimg.cn/20210512222130891.jpg',
    },
    {
        title: 'plain-design-pro',
        desc: '基于Plain Design实现的一个企业级中后台前端/设计解决方案，内置了plain-micro-application的具体实现。',
        tags: ['Plain Design'],
        avatar: 'https://img-blog.csdnimg.cn/20210512222130882.jpg',
    },
    {
        title: 'plain-ui-pro',
        desc: '基于Plain UI实现的一个企业级中后台前端/设计解决方案，内置了plain-micro-application的具体实现。',
        tags: ['Plain UI'],
        avatar: 'https://img-blog.csdnimg.cn/20210512222130881.jpg',
    },
]

const quickLink: {
    name: string,
    icon: string,
}[] = [
    {name: '统计', icon: 'el-icon-picture-outline',},
    {name: '监控', icon: 'el-icon-view',},
    {name: '列表', icon: 'el-icon-list',},
    {name: '搜索', icon: 'el-icon-search',},
    {name: '设置', icon: 'el-icon-setting',},
    {name: '项目', icon: 'el-icon-tools',},
    {name: '仓库', icon: 'el-icon-code',},
    {name: '开发', icon: 'el-icon-debug',},
]

const customOperator: {
    name: string,
    onClick?: () => void,
}[] = [
    {name: '签到',},
    {name: '网盘',},
    {name: '客户',},
    {name: '文档',},
    {name: '日程',},
    {name: '汇报',},
    {name: '公告',},
    {name: '培训',},
    {name: '研发',},
    {name: '审批',},
    {name: '跟进',},
    {name: '消息',},
]

const avatars = {
    海绵宝宝: 'https://img-blog.csdnimg.cn/2021051222111964.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70',
    章鱼哥: 'https://img-blog.csdnimg.cn/20210512221119211.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70',
    派大星: 'https://img-blog.csdnimg.cn/20210512221118978.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70',
    蟹老板: 'https://img-blog.csdnimg.cn/202105122211195.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70',
    痞老板: 'https://img-blog.csdnimg.cn/20210512221118976.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70',
}

const nextTime = (() => {
    let time = PlDate.today()
    return () => {
        time = time.minute(-Math.ceil(Math.random() * 1000))
        return time.format('YYYY-MM-DD HH:mm')
    }
})();

const trendsData: {
    user: { name: string, avatar: string },
    time: string,
    description: string,
    descriptionFormatter: Record<string, { format: () => ReactNode, handler: () => any }>,
}[] = [
    {
        user: {name: '海绵宝宝', avatar: avatars.海绵宝宝},
        time: nextTime(),
        description: '关注了<<$1>>',
        descriptionFormatter: {
            $1: {
                format: () => '章鱼哥',
                handler: () => window.open(avatars.章鱼哥)
            },
        },
    },
    {
        user: {name: '派大星', avatar: avatars.派大星},
        time: nextTime(),
        description: '拍了拍<<$2>>',
        descriptionFormatter: {
            $2: {
                format: () => '我',
                handler: () => window.open(avatars.痞老板)
            },
        },
    },
    {
        user: {name: '章鱼哥', avatar: avatars.章鱼哥},
        time: nextTime(),
        description: '回复了你：准备好下班了吗？',
        descriptionFormatter: {},
    },
    {
        user: {name: '蟹老板', avatar: avatars.蟹老板},
        time: nextTime(),
        description: '发表了动态：有些人就是天生运气好，只要在路上走啊走啊，就能捡到很多的钱；其他人却要，努力的工作。',
        descriptionFormatter: {},
    },
    {
        user: {name: '派大星', avatar: avatars.派大星},
        time: nextTime(),
        description: '：他真是太可怕了，一看见他我就恶心！那双大牛眼睛，方身体，两颗大门牙，还有那个愚蠢的领带！真是太可怕了！（海绵宝宝：0_0）……但是这些在你身上就很好看。',
        descriptionFormatter: {},
    },
    {
        user: {name: '你', avatar: avatars.痞老板},
        time: nextTime(),
        description: '发表了动态：我的妈咪呀倒霉到爆，不管会怎么样一定一下就熬过了。',
        descriptionFormatter: {},
    },

    {
        user: {name: '你', avatar: avatars.痞老板},
        time: nextTime(),
        description: '对<<$1>>发出了提问：我想知道<<$2>>的秘方，蟹黄堡真的是用蟹黄做的吗？',
        descriptionFormatter: {
            $1: {
                format: () => '蟹老板',
                handler: () => window.open(avatars.蟹老板)
            },
            $2: {
                format: () => '蟹黄堡',
                handler: () => window.open('https://baike.baidu.com/item/%E8%9F%B9%E9%BB%84%E5%A0%A1/9192998?fr=aladdin')
            },
        },
    },
    {
        user: {name: '派大星', avatar: avatars.派大星},
        time: nextTime(),
        description: '知识代替不了友谊，所以我宁愿做一个笨蛋也不愿失去你。 --派大星对海绵宝宝说',
        descriptionFormatter: {},
    },
    {
        user: {name: '章鱼哥', avatar: avatars.章鱼哥},
        time: nextTime(),
        description: '在读书：你说谎瞒不过我，可是你诚实，我又难过。',
        descriptionFormatter: {},
    },
    {
        user: {name: '蟹老板', avatar: avatars.蟹老板},
        time: nextTime(),
        description: '为了一块钱弄断了手臂',
        descriptionFormatter: {},
    },
]

const myTeam: { avatar: string, name: string, job: string }[] = [
    {name: '蟹老板', avatar: avatars.蟹老板, job: '蟹堡王CEO'},
    {name: '海绵宝宝', avatar: avatars.海绵宝宝, job: '蟹堡王CTO'},
    {name: '章鱼哥', avatar: avatars.章鱼哥, job: '蟹堡王CFO'},
    {name: '派大星', avatar: avatars.派大星, job: '蟹堡王鼓励师',},
    {name: '痞老板', avatar: avatars.痞老板, job: '蟹堡王卧底'},
]

export default designProPage(() => {

    const user = LoginService.user.info

    return () => (
        <div className="pro-workspace-page">
            <div className="pro-workspace-page-title">工作台</div>
            <div className="pro-workspace-page-user">
                <img src={user.avatar}/>
                <div className="pro-workspace-page-user-detail">
                    <div>早安，{user.name}，一日之计在于晨，快来制定今天的任务计划吧！</div>
                    <div>
                        <PlIcon icon={user.gender === 'Y' ? 'el-icon-male' : 'el-icon-female'} status={user.gender === 'Y' ? 'primary' : 'error'}/>
                        {user.title} | {user.group} - {user.dept}
                    </div>
                </div>
                <div className={'pro-workspace-page-user-placeholder'}/>
                <div className="pro-workspace-page-user-achieve">
                    <div>
                        <div>仓库数量 / star</div>
                        <div>99 / 208</div>
                    </div>
                    <div>
                        <div>关注 / 参与</div>
                        <div>18 / 22</div>
                    </div>
                    <div>
                        <div>提交数 / 排名</div>
                        <div>10,5372 / 5073</div>
                    </div>
                </div>
            </div>
            <div style={{padding: '0 24px'}}>
                <PlRow gutter={24}>
                    <PlCol span={18}>
                        <PlRow gutter={2}>
                            {projects.map((project, index) => (
                                <PlCol span={6} key={index}>
                                    <div className="pro-workspace-page-project-item">
                                        <img src={project.avatar}/>
                                        <div className="pro-workspace-page-project-item-title">{project.title}</div>
                                        <div className="pro-workspace-page-project-item-tags">
                                            {project.tags.map((tag => <span key={tag}>{tag}</span>))}
                                        </div>
                                        <div className="pro-workspace-page-project-item-desc">{project.desc}</div>
                                    </div>
                                </PlCol>
                            ))}
                        </PlRow>

                        <div className="pro-workspace-page-card">
                            <div className="pro-workspace-page-card-head">
                                <div className="pro-workspace-page-card-head-title">动态</div>
                                <div className="pro-workspace-page-card-head-right">
                                    <PlIcon icon="el-icon-more" status="primary"/>
                                </div>
                            </div>
                            <div className="pro-workspace-page-card-body pro-workspace-page-trends-list">
                                {trendsData.map((item, index) => {

                                    const description = `<<$_$>>${item.description}`
                                    const descriptionFormatter = Object.assign({}, item.descriptionFormatter, {
                                        $_$: {
                                            format: () => item.user.name,
                                            handler: () => window.open(item.user.avatar),
                                        }
                                    })

                                    const descriptionContent: ReactNode[] = []
                                    const reg = /<<(.*?)>>/g
                                    let match = reg.exec(description)
                                    let lastEnd = 0
                                    let key = 0

                                    while (!!match) {
                                        const matchKey = match[1]
                                        const matchIndex = match.index
                                        const prepend = description.slice(lastEnd, matchIndex).trim()
                                        if (!!prepend) {
                                            descriptionContent.push(<span key={key++}>
                                            {prepend}
                                        </span>)
                                        }
                                        lastEnd = matchIndex + matchKey.length + 4
                                        const formatter = descriptionFormatter[matchKey]
                                        if (!formatter) {
                                            console.log({matchKey, descriptionFormatter,})
                                            console.error(`description formatter key: ${matchKey} is not match anything!`)
                                            return null
                                        }
                                        descriptionContent.push(
                                            <span key={key++} onClick={formatter.handler} className="pro-workspace-page-trends-item-link pl-text-primary">
                                            {formatter.format()}
                                        </span>
                                        )
                                        match = reg.exec(description)
                                    }

                                    descriptionContent.push(
                                        <span key={key++}>
                                        {description.slice(lastEnd)}
                                    </span>
                                    )

                                    return (
                                        <div className="pro-workspace-page-trends-item" key={index}>
                                            <div className="pro-workspace-page-trends-item-avatar">
                                                <img src={item.user.avatar}/>
                                            </div>
                                            <div className="pro-workspace-page-trends-detail">
                                                <div>{descriptionContent}</div>
                                                <div>{item.time}</div>
                                            </div>
                                        </div>
                                    )
                                })}
                                <div className="pro-workspace-page-trends-more">
                                    <PlButton label={'全部动态'} mode={'text'}/>
                                </div>
                            </div>
                        </div>
                    </PlCol>
                    <PlCol span={6}>
                        <div className="pro-workspace-page-card">
                            <div className="pro-workspace-page-card-head">
                                <div className="pro-workspace-page-card-head-title">快速访问 / 功能导航</div>
                                <div className="pro-workspace-page-card-head-right">
                                    <PlIcon icon="el-icon-setting" status="primary"/>
                                </div>
                            </div>
                            <div className="pro-workspace-page-card-body pro-workspace-quick-link-list">
                                <PlRow>
                                    {quickLink.map((item, index) => (
                                        <PlCol span={6} key={index}>
                                            <div className="pro-workspace-quick-link-item">
                                                <PlIcon icon={item.icon}/>
                                                <span>{item.name}</span>
                                            </div>
                                        </PlCol>
                                    ))}
                                </PlRow>
                            </div>
                        </div>

                        <div className="pro-workspace-page-card pro-workspace-custom-operator">
                            <div className="pro-workspace-page-card-head">
                                <div className="pro-workspace-page-card-head-title">自定义操作</div>
                                <div className="pro-workspace-page-card-head-right">
                                    <PlIcon icon="el-icon-plus" status="primary"/>
                                </div>
                            </div>
                            <div className="pro-workspace-page-card-body pro-workspace-quick-link-list">
                                <PlRow>
                                    {customOperator.map((item, index) => (
                                        <PlCol span={6} key={index}>
                                            <div className="pro-workspace-quick-link-item">
                                                <span>{item.name}</span>
                                            </div>
                                        </PlCol>
                                    ))}
                                </PlRow>
                            </div>
                        </div>

                        <div className="pro-workspace-page-card pro-workspace-todo-container">
                            <div className="pro-workspace-page-card-head">
                                <div className="pro-workspace-page-card-head-title">待办事项</div>
                                <div className="pro-workspace-page-card-head-right">
                                    <PlIcon icon="el-icon-more" status="primary"/>
                                </div>
                            </div>
                            <div className="pro-workspace-page-card-body pro-workspace-todo-list">
                                {ManagerBellData.todos.render()}
                            </div>
                        </div>

                        <div className="pro-workspace-page-card pro-workspace-my-team">
                            <div className="pro-workspace-page-card-head">
                                <div className="pro-workspace-page-card-head-title">我的团队</div>
                                <div className="pro-workspace-page-card-head-right">
                                    <PlIcon icon="el-icon-more" status="primary"/>
                                </div>
                            </div>
                            <div className="pro-workspace-page-card-body">
                                {myTeam.map((person, index) => (
                                    <div className="pro-workspace-my-team-item" key={index}>
                                        <img src={person.avatar} onClick={() => window.open(person.avatar)}/>
                                        <div>
                                            <div>{person.name}</div>
                                            <div>{person.job}</div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </PlCol>
                </PlRow>
            </div>
        </div>
    )
})